<template>
	<view :class="['page',{'iphoneX':isIphoneX}]">
		<c-header bgColor="bg-white">
			<view class="header" slot="header">
				<view class="title">审批</view> 
			</view>
		</c-header> 
		<view class="body">
			<view class="hd-title">
				<u--text text="库存相关" size="32" align="left" bold></u--text>
			</view>		 
			<view class="tools-list">
				<view data-url="/package_kucun/shenpi-list/shenpi-list?type=1&page=list" data-isopen="1" class="item" @click="jump">
					<view class="icon"><image src="@/static/images/kucun/sp_icon1.png" mode="widthFix"></image></view>
					<view class="name">我发的审批</view>
				</view>
				<template v-if="userInfo.role_id!=24">
					<view data-url="/package_kucun/shenpi-list/shenpi-list?type=2&page=list" data-isopen="1" class="item" @click="jump">
						<view class="icon"><image src="@/static/images/kucun/sp_icon2.png" mode="widthFix"></image><view v-if="nums.total_shenpi>0" class="num">{{nums.total_shenpi>100?'99+':nums.total_shenpi}}</view></view>
						<view class="name">需要我审批</view>
					</view>
					<view data-url="/package_kucun/shenpi-list/shenpi-list?type=3&page=list" data-isopen="1" class="item" @click="jump">
						<view class="icon"><image src="@/static/images/kucun/sp_icon3.png" mode="widthFix"></image><view v-if="nums.total_fahuo>0" class="num">{{nums.total_fahuo>100?'99+':nums.total_fahuo}}</view></view>
						<view class="name">需要我发货</view>
					</view>
					<view data-url="/package_kucun/shenpi-list/shenpi-list?type=4&page=list" data-isopen="1" class="item" @click="jump">
						<view class="icon"><image src="@/static/images/kucun/sp_icon4.png" mode="widthFix"></image><view v-if="nums.total_ruku>0" class="num">{{nums.total_ruku>100?'99+':nums.total_ruku}}</view></view>
						<view class="name">需要我入库</view>
					</view>
					<view data-url="/package_kucun/shenpi-list/shenpi-list?type=5&page=list" data-isopen="1" class="item" @click="jump">
						<view class="icon"><image src="@/static/images/kucun/sp_icon5.png" mode="widthFix"></image><view v-if="nums.total_jieqing>0" class="num">{{nums.total_jieqing>100?'99+':nums.total_jieqing}}</view></view>
						<view class="name">需要我结清</view>
					</view>	
					<view data-url="/package_kucun/shenpi-list/shenpi-list?type=6&page=list" data-isopen="1" class="item" @click="jump">
						<view class="icon"><image src="@/static/images/kucun/sp_icon6.png" mode="widthFix"></image></view>
						<view class="name">抄送给我的</view>
					</view>	
				</template>
			</view>
			<template v-if="userInfo.role_id!=24">
				<view class="hd-title">
					<u--text text="材料相关" size="32" align="left" bold></u--text>
				</view>			
				<view class="tools-list">
					<view data-url="/package_kucun/shenpi-list/shenpi-list?type=7&page=list" data-isopen="1" class="item" @click="jump">
						<view class="icon"><image src="@/static/images/kucun/sp_icon7.png" mode="widthFix"></image></view>
						<view class="name">我发的入库</view>
					</view>
					<view data-url="/package_kucun/shenpi-list/shenpi-list?type=8&page=list" data-isopen="1" class="item" @click="jump">
						<view class="icon"><image src="@/static/images/kucun/sp_icon8.png" mode="widthFix"></image></view>
						<view class="name">需要我审批</view>
					</view>
					<!-- <view data-url="/package_project/index/index" data-isopen="1" class="item" @click="jump">
						<view class="icon"><image src="@/static/images/kucun/sp_icon3.png" mode="widthFix"></image></view>
						<view class="name">需要我发货</view>
					</view>
					<view data-url="/package_project/index/index" data-isopen="1" class="item" @click="jump">
						<view class="icon"><image src="@/static/images/kucun/sp_icon4.png" mode="widthFix"></image></view>
						<view class="name">需要我入库</view>
					</view>
					<view data-url="/package_project/index/index" data-isopen="1" class="item" @click="jump">
						<view class="icon"><image src="@/static/images/kucun/sp_icon5.png" mode="widthFix"></image></view>
						<view class="name">需要我结清</view>
					</view>	
					<view data-url="/package_project/index/index" data-isopen="1" class="item" @click="jump">
						<view class="icon"><image src="@/static/images/kucun/sp_icon6.png" mode="widthFix"></image></view>
						<view class="name">抄送给我的</view>
					</view>				 -->
				</view>
					 
			</template> 
		</view>
		
		<c-nav-kucun :switchTab="3"></c-nav-kucun>
		 
		 
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isLogin:false,
				userInfo:uni.getStorageSync('userInfo'), 
				isIphoneX:getApp().globalData.isIphoneX,
				nums:{} 
			}
		},
		async onLoad(params) { 
			this.isLogin=await this.$loginState('check');  
			 
			this.approvalcount()
		},
		onShow() {
			 
		},
		onReachBottom(){
			 
		},
		methods: {
			jump(e){
				let url=e.currentTarget.dataset.url,
				    isOpen=e.currentTarget.dataset.isopen;
				
				if(isOpen==0){
					uni.showToast({
						icon:'loading',
						title:'此功能暂未开放',
						mask:true
					})
					return 
				}
				
				uni.navigateTo({
					url:url
				})
			},
			
			async approvalcount(){
				let res=await this.$api.user_api.approvalcount(); 
				if(res.data.code==200){ 
					this.nums=res.data.data; 			 
				}
			},
			 
		
		},
		computed:{
			list_update(){
				return this.$store.state.kucun_shenpi_update;
			}
		},
		watch:{
			list_update(newer,older){ 
				if(newer!=older){ 
					console.log('审批更新')
					this.approvalcount();
				} 
			} 
		}
		
	}
</script>

<style lang="less">
	.hd-title{
		padding: 20rpx;
	}
	.tools-list{
		display: flex;
		flex-wrap: wrap;
		margin:0 20rpx;
		padding: 20rpx;
		background: #fff;
		border-radius: 15rpx;
		.item{
			width: 33.3%;
			text-align: center;
			padding: 40rpx 0;
			.icon{
				position: relative;
				width: 70rpx;
				height: 70rpx;
				margin: 0 auto 20rpx; 
				.num{
					position: absolute;
					right: -19rpx;
					top: -19rpx;
					min-width: 22rpx;
					padding: 0 10rpx;
					height: 38rpx;
					text-align: center;
					line-height: 38rpx;
					background: #f00;
					border-radius: 38rpx;
					font-size: 30rpx;
					color: #fff;
				}
				image{
					width: 100%;
				}
			}
			.name{
				font-size: 28rpx;
			}
		}
	}
</style>
